import ReactDOM from 'react-dom';
import React, { Component } from 'react';

import MainFootballField_bg from './assets/足球场线稿.svg';
import RankedByShots_bg from './assets/组 6.svg';
import Radio from './assets/Radio.svg';
import Radio_chosen from './assets/Radio_chosen.svg';
import './MainFootballField.css'
import './style.css';
import './zzsc.css';

import Slider from 'react-rangeslider';

import DrawAllPhase from '../DrawAllPhase/DrawAllPhase';                       //适用聚类数据
import DrawAllPhaseForSelf from '../DrawAllPhase/DrawAllPhaseForSelf';        //适用比赛全部数据
import DrawAllPhaseForSelf2 from '../DrawAllPhase/DrawAllPhaseForSelf2';
import DrawAllPhase2 from '../DrawAllPhase/DrawAllPhase2';
import UserControl from '../Section2-交互/UserControl';
import EchartsBarChart1 from '../echarts柱状图/EchartsBarChart1';
import EchartsBarChart2 from '../echarts柱状图/EchartsBarChart2';

import data1 from '../data/clustered-data.json';
import data2 from '../data/定位.json';
import data4 from '../data/result2.json';

import data上法国R1 from '../data/RankByShots上法国/1/result.json';
import data上法国R2 from '../data/RankByShots上法国/2/result.json';
import data上法国R3 from '../data/RankByShots上法国/3/result.json';
import data上法国R4 from '../data/RankByShots上法国/4/result.json';
import data上法国R5 from '../data/RankByShots上法国/5/result.json';
import data上法国R6 from '../data/RankByShots上法国/6/result.json';
import data上法国R7 from '../data/RankByShots上法国/7/result.json';
import data上法国R8 from '../data/RankByShots上法国/8/result.json';

import data上克罗地亚R1 from '../data/RankByShots上克罗地亚/1/result.json';
import data上克罗地亚R2 from '../data/RankByShots上克罗地亚/2/result.json';
import data上克罗地亚R3 from '../data/RankByShots上克罗地亚/3/result.json';
import data上克罗地亚R4 from '../data/RankByShots上克罗地亚/4/result.json';
import data上克罗地亚R5 from '../data/RankByShots上克罗地亚/5/result.json';
import data上克罗地亚R6 from '../data/RankByShots上克罗地亚/6/result.json';
import data上克罗地亚R7 from '../data/RankByShots上克罗地亚/7/result.json';
import data上克罗地亚R8 from '../data/RankByShots上克罗地亚/8/result.json';

import data左法国 from '../data/左-2058014-法国-4418.json';
import data左法国1 from '../data/2058014法国聚类/1/result.json';
import data左法国2 from '../data/2058014法国聚类/2/result.json';
import data左法国3 from '../data/2058014法国聚类/3/result.json';
import data左法国4 from '../data/2058014法国聚类/4/result.json';
import data左法国5 from '../data/2058014法国聚类/5/result.json';
import data左法国6 from '../data/2058014法国聚类/6/result.json';
import data左法国7 from '../data/2058014法国聚类/7/result.json';
import data左法国8 from '../data/2058014法国聚类/8/result.json';

import data左比利时 from '../data/左-2058014-比利时-5629.json';
import data左比利时1 from '../data/2058014比利时聚类/1/result.json';
import data左比利时2 from '../data/2058014比利时聚类/2/result.json';
import data左比利时3 from '../data/2058014比利时聚类/3/result.json';
import data左比利时4 from '../data/2058014比利时聚类/4/result.json';
import data左比利时5 from '../data/2058014比利时聚类/5/result.json';
import data左比利时6 from '../data/2058014比利时聚类/6/result.json';
import data左比利时7 from '../data/2058014比利时聚类/7/result.json';
import data左比利时8 from '../data/2058014比利时聚类/8/result.json';


import data右克罗地亚 from '../data/右-2058015-克罗地亚-9598.json';
import data右克罗地亚1 from '../data/2058015克罗地亚聚类/1/result.json';
import data右克罗地亚2 from '../data/2058015克罗地亚聚类/2/result.json';
import data右克罗地亚3 from '../data/2058015克罗地亚聚类/3/result.json';
import data右克罗地亚4 from '../data/2058015克罗地亚聚类/4/result.json';
import data右克罗地亚5 from '../data/2058015克罗地亚聚类/5/result.json';
import data右克罗地亚6 from '../data/2058015克罗地亚聚类/6/result.json';
import data右克罗地亚7 from '../data/2058015克罗地亚聚类/7/result.json';
import data右克罗地亚8 from '../data/2058015克罗地亚聚类/8/result.json';

import data右英格兰 from '../data/右-2058015-英格兰-2413.json';
import data右英格兰1 from '../data/2058015英格兰聚类/1/result.json';
import data右英格兰2 from '../data/2058015英格兰聚类/2/result.json';
import data右英格兰3 from '../data/2058015英格兰聚类/3/result.json';
import data右英格兰4 from '../data/2058015英格兰聚类/4/result.json';
import data右英格兰5 from '../data/2058015英格兰聚类/5/result.json';
import data右英格兰6 from '../data/2058015英格兰聚类/6/result.json';
import data右英格兰7 from '../data/2058015英格兰聚类/7/result.json';
import data右英格兰8 from '../data/2058015英格兰聚类/8/result.json';

import data下比利时 from '../data/下-2058016-比利时-5629.json';
import data下比利时1 from '../data/2058016比利时聚类/1/result.json';
import data下比利时2 from '../data/2058016比利时聚类/2/result.json';
import data下比利时3 from '../data/2058016比利时聚类/3/result.json';
import data下比利时4 from '../data/2058016比利时聚类/4/result.json';
import data下比利时5 from '../data/2058016比利时聚类/5/result.json';
import data下比利时6 from '../data/2058016比利时聚类/6/result.json';
import data下比利时7 from '../data/2058016比利时聚类/7/result.json';
import data下比利时8 from '../data/2058016比利时聚类/8/result.json';

import data下英格兰 from '../data/下-2058016-英格兰-2413.json';
import data下英格兰1 from '../data/2058016英格兰聚类/1/result.json';
import data下英格兰2 from '../data/2058016英格兰聚类/2/result.json';
import data下英格兰3 from '../data/2058016英格兰聚类/3/result.json';
import data下英格兰4 from '../data/2058016英格兰聚类/4/result.json';
import data下英格兰5 from '../data/2058016英格兰聚类/5/result.json';
import data下英格兰6 from '../data/2058016英格兰聚类/6/result.json';
import data下英格兰7 from '../data/2058016英格兰聚类/7/result.json';
import data下英格兰8 from '../data/2058016英格兰聚类/8/result.json';

import data上法国 from '../data/上-2058017-法国-4418.json';
import data上法国1 from '../data/2058017法国聚类/1/result.json';
import data上法国2 from '../data/2058017法国聚类/2/result.json';
import data上法国3 from '../data/2058017法国聚类/3/result.json';
import data上法国4 from '../data/2058017法国聚类/4/result.json';
import data上法国5 from '../data/2058017法国聚类/5/result.json';
import data上法国6 from '../data/2058017法国聚类/6/result.json';
import data上法国7 from '../data/2058017法国聚类/7/result.json';
import data上法国8 from '../data/2058017法国聚类/8/result.json';

import data上克罗地亚 from '../data/上-2058017-克罗地亚-9598.json';
import data上克罗地亚1 from '../data/2058017克罗地亚聚类/1/result.json';
import data上克罗地亚2 from '../data/2058017克罗地亚聚类/2/result.json';
import data上克罗地亚3 from '../data/2058017克罗地亚聚类/3/result.json';
import data上克罗地亚4 from '../data/2058017克罗地亚聚类/4/result.json';
import data上克罗地亚5 from '../data/2058017克罗地亚聚类/5/result.json';
import data上克罗地亚6 from '../data/2058017克罗地亚聚类/6/result.json';
import data上克罗地亚7 from '../data/2058017克罗地亚聚类/7/result.json';
import data上克罗地亚8 from '../data/2058017克罗地亚聚类/8/result.json';

//DrawAllPhase        需要data clusterIndex lineColor ifShowAllPath
//DrawAllPhaseForSelf 需要data lineColor ifShowAllPath


var p1 = 1;
var p2 = 1;
var p3 = 1;
var Rank1 = 1;   //控制决赛聚类按照Shots的值进行排序

class MainFootballField extends React.Component{

	constructor(props) {
	    super(props);
	    this.state = { 
	      	ifShowAllPath: true,
	      	data主场球队:data左法国,
	      	data客场球队:data左比利时,
	      	clusterdata主场球队:data左法国2,
	      	clusterdata客场球队:data左比利时2,
	      	clusterdata主场球队R:data上法国R2,
	      	clusterdata客场球队R:data上克罗地亚R2,
	      	左法国:[data左法国1,data左法国2,data左法国3,data左法国4,data左法国5,data左法国6,data左法国7,data左法国8],
	      	左比利时:[data左比利时1,data左比利时2,data左比利时3,data左比利时4,data左比利时5,data左比利时6,data左比利时7,data左比利时8],
	      	上法国:[data上法国1,data上法国2,data上法国3,data上法国4,data上法国5,data上法国6,data上法国7,data上法国8],
	      	上法国R:[data上法国R1,data上法国R2,data上法国R3,data上法国R4,data上法国R5,data上法国R6,data上法国R7,data上法国R8],
	      	上克罗地亚:[data上克罗地亚1,data上克罗地亚2,data上克罗地亚3,data上克罗地亚4,data上克罗地亚5,data上克罗地亚6,data上克罗地亚7,data上克罗地亚8],
	      	上克罗地亚R:[data上克罗地亚R1,data上克罗地亚R2,data上克罗地亚R3,data上克罗地亚R4,data上克罗地亚R5,data上克罗地亚R6,data上克罗地亚R7,data上克罗地亚R8],
	      	右克罗地亚:[data右克罗地亚1,data右克罗地亚2,data右克罗地亚3,data右克罗地亚4,data右克罗地亚5,data右克罗地亚6,data右克罗地亚7,data右克罗地亚8],
	      	右英格兰:[data右英格兰1,data右英格兰2,data右英格兰3,data右英格兰4,data右英格兰5,data右英格兰6,data右英格兰7,data右英格兰8],
	      	下比利时:[data下比利时1,data下比利时2,data下比利时3,data下比利时4,data下比利时5,data下比利时6,data下比利时7,data下比利时8],
	      	下英格兰:[data下英格兰1,data下英格兰2,data下英格兰3,data下英格兰4,data下英格兰5,data下英格兰6,data下英格兰7,data下英格兰8],

	      	clusterNum1:2,
	      	clusterNum2:2,
	      	temp_clusterdata主场球队:data左法国2,
	      	temp_index:0,
	      	temp_lineColor:'#F7E1C0',
	      	temp_circleColor:'#FE9B01',
	      	temp_circleStroke:'white',
	      	
	    };  
	}
	changeToRankView(){
		if (this.state.data主场球队 == data上法国 && Rank1 == 1){
			Rank1=0;
			this.setState({
				clusterdata主场球队R:this.state.上法国R[parseInt(this.state.clusterNum1-1)],
				clusterdata客场球队R:this.state.上克罗地亚R[parseInt(this.state.clusterNum2-1)],
			});
			document.getElementById('radio3_chosen').style.opacity = '1';
		}
		else if(this.state.data主场球队 == data上法国 && Rank1 == 0){
			Rank1=1;  //这一次是单纯为了触发渲染
			this.setState({
				clusterdata主场球队:this.state.上法国[parseInt(this.state.clusterNum1-1)],
				clusterdata客场球队:this.state.上克罗地亚[parseInt(this.state.clusterNum2-1)],
			});
			document.getElementById('radio3_chosen').style.opacity = '0';
		}
		
	}


	//逻辑待改，好吧不改也行!
	changeToMainView = (props) =>{
		if (p3 == 1){
			document.getElementById('cluster临时大图').style.display = 'block';
			p3 = 0;
		}
		else if(p3 == 0){
			document.getElementById('cluster临时大图').style.display = 'none';
			p3 = 1;
		}
		this.setState({
			temp_clusterdata主场球队:props.data,
	      	temp_index:props.index,
	      	temp_lineColor:props.lineColor,
	      	temp_circleColor:props.circleColor,
	      	temp_circleStroke:props.circleStroke,
		});

	}

	renderDrawAllPhase1(num){
		if (Rank1 == 1){
			var items = [];
			for (var i=0;i<num;i++){
				items.push(
					<div className='MainFootballField_主场球队Cluster视图' >
							<DrawAllPhase data={this.state.clusterdata主场球队} index={i} lineColor={'#F7E1C0'} circleColor={'#FE9B01'} circleStroke={'white'} ifShowAllPath={this.state.ifShowAllPath} onClick={(props) => this.changeToMainView(props)}/>
						</div>
				);
			}
			return (<div>{items}</div>);
		}
		else if (Rank1 == 0){
			var items = [];
			for (var i=0;i<num;i++){
				items.push(
					<div className='MainFootballField_主场球队Cluster视图' >
							<DrawAllPhase2 data={this.state.clusterdata主场球队R} index={i} lineColor={'#F7E1C0'} circleColor={'#FE9B01'} circleStroke={'white'} ifShowAllPath={this.state.ifShowAllPath} onClick={(props) => this.changeToMainView(props)}/>
						</div>
				);
			}
			return (<div>{items}</div>);
		}
			
	}
	renderDrawAllPhase2(num){
		if (Rank1 == 1){
			var items = [];
			for (var i=0;i<num;i++){
				items.push(
					<div className='MainFootballField_客场球队Cluster视图' >
							<DrawAllPhase data={this.state.clusterdata客场球队} index={i} lineColor={'#ADFEF6'} circleColor={'none'} circleStroke={'#FFEAF2'} ifShowAllPath={this.state.ifShowAllPath} onClick={(props) => this.changeToMainView(props)}/>
						</div>
				);
			}
			return (<div>{items}</div>);
		}
		else if (Rank1 == 0){
			var items = [];
			for (var i=0;i<num;i++){
				items.push(
					<div className='MainFootballField_客场球队Cluster视图' >
							<DrawAllPhase2 data={this.state.clusterdata客场球队R} index={i} lineColor={'#ADFEF6'} circleColor={'none'} circleStroke={'#FFEAF2'} ifShowAllPath={this.state.ifShowAllPath} onClick={(props) => this.changeToMainView(props)}/>
						</div>
				);
			}
			return (<div>{items}</div>);
		}
	}

	ShowAllPath(){
		const temp_ifShowAllPath = this.state.ifShowAllPath;
		this.setState({
			ifShowAllPath:!temp_ifShowAllPath,
		})
	}
	Radio1(){
		if (p1 == 1){
			document.getElementById('radio1_chosen').style.opacity = '0';
			document.getElementById('主场球队').style.display = 'none';
			p1=0;
		}
		else{
			document.getElementById('radio1_chosen').style.opacity = '1';
			document.getElementById('主场球队').style.display = 'block';
			p1=1;
		}
	}
	Radio2(){
		if (p2 == 0){
			document.getElementById('radio2_chosen').style.opacity = '0';
			document.getElementById('客场球队').style.display = 'none';
			p2=1;
		}
		else{
			document.getElementById('radio2_chosen').style.opacity = '1';
			document.getElementById('客场球队').style.display = 'block';
			p2=0;
		}
	}

	
	

	render(){
		return(
			<div>

				
				<div id="MainFootballField_主客场中心视图" className='MainFootballField'>
					<img src={MainFootballField_bg} style={{position:'absolute', left:'50px',top:'44.87px',}}></img>	
					<div id='主场球队'><DrawAllPhaseForSelf start={0} end={100} data={this.state.data主场球队} lineColor={'#F7E1C0'} circleColor={'#FE9B01'} circleStroke={'white'} ifShowAllPath={this.state.ifShowAllPath}/></div>
					<div id='客场球队' style={{display:'none'}}><DrawAllPhaseForSelf start={100} end={0} data={this.state.data客场球队} lineColor={'#ADFEF6'} circleColor={'none'} circleStroke={'#FFEAF2'} ifShowAllPath={this.state.ifShowAllPath}/></div>
					<div id='cluster临时大图' style={{display:'none'}}>
						<DrawAllPhaseForSelf2 data={this.state.temp_clusterdata主场球队} index={this.state.temp_index} lineColor={this.state.temp_lineColor} circleColor={this.state.temp_circleColor} circleStroke={this.state.temp_circleStroke} ifShowAllPath={this.state.ifShowAllPath}/>
					</div>

					
				</div>

				<div id='主场球队Cluster视图列表' className='主场球队Cluster视图列表'>
					<EchartsBarChart1 data={this.state.上法国R} clusterNum={this.state.clusterNum1} BarColor={'#F7E1C0'} key={Date.now()}/>
					{this.renderDrawAllPhase1(this.state.clusterNum1)}
				</div>
				<div id='客场球队Cluster视图列表' className='客场球队Cluster视图列表'>
					<EchartsBarChart2 data={this.state.上克罗地亚R} clusterNum={this.state.clusterNum2} BarColor={'#ADFEF6'} key={Date.now()}/>
					{this.renderDrawAllPhase2(this.state.clusterNum2)}
				</div>
				

				<div id='RankedByShots' style={{display:'none'}} onClick={() => this.changeToRankView()}>
					<img src={RankedByShots_bg} style={{position:'absolute',top:'45px',left:'1355px'}}></img>
					<img src={Radio} style={{position:'absolute',top:'51px',left:'1616.4px'}}></img>
					<img id='radio3_chosen' src={Radio_chosen} style={{position:'absolute',top:'62px',left:'1630px',opacity:'0'}}></img>
				</div>
				<div><UserControl/></div>

				<div id='radio1' style={{position:'absolute',top:'266px',left:'22px'}} onClick={() => this.Radio1()}>
					<img src={Radio}></img>
					<img id='radio1_chosen' src={Radio_chosen} style={{position:'absolute',top:'11px',left:'14px'}}></img>
				</div>

				<div id='radio2' style={{position:'absolute',top:'316px',left:'22px'}} onClick={() => this.Radio2()}>
					<img src={Radio}></img>
					<img id='radio2_chosen' src={Radio_chosen} style={{position:'absolute',top:'10.5px',left:'14px',opacity:'0'}}></img>
				</div>

				<div className="switch-box bigger">
					<input id="default" class="switch-box-input" type="checkbox" onClick={() => this.ShowAllPath()}/>
					<label for="default" class="switch-box-slider"></label>
					<label for="default" class="switch-box-label">Show Trail</label>
				</div>

				<div className='slider' style={{position:'absolute',left:'110px',top:'408.5px'}}>
        			<Slider
          				min={1}
          				max={8}
          				value={this.state.clusterNum1}
          				onChange={this.handleChange1}
          			/>
        			<div className='value' style={{position:'absolute',top:'3px',color:'white'}}>{this.state.clusterNum1}</div>
      			</div>
      			<div className='slider' style={{position:'absolute',left:'110px',top:'448px'}}>
        			<Slider
          				min={1}
          				max={8}
          				value={this.state.clusterNum2}
          				onChange={this.handleChange2}
          			/>
        			<div className='value' style={{position:'absolute',top:'3px',color:'white'}}>{this.state.clusterNum2}</div>
      			</div>

			</div>	
			)
	}


	handleChange1 = value => {
    	this.setState({
      		clusterNum1: value
    	});
    	switch (this.state.data主场球队){
    		case data左法国:
    			this.setState({clusterdata主场球队:this.state.左法国[parseInt(value-1)]});break;
    		case data上法国:
    			if(Rank1==1){this.setState({clusterdata主场球队:this.state.上法国[parseInt(value-1)]});break;}
    			if(Rank1==0){this.setState({clusterdata主场球队R:this.state.上法国R[parseInt(value-1)]});break;}
    		case data右克罗地亚:
    			this.setState({clusterdata主场球队:this.state.右克罗地亚[parseInt(value-1)]});break;
    		case data下比利时:
    			this.setState({clusterdata主场球队:this.state.下比利时[parseInt(value-1)]});break;

    	}
  	};
  	handleChange2 = value => {
    	this.setState({
      		clusterNum2: value
    	});
    	switch (this.state.data客场球队){
    		case data左比利时:
    			this.setState({clusterdata客场球队:this.state.左比利时[parseInt(value-1)]});break;
    		case data上克罗地亚:
    			if(Rank1==1){this.setState({clusterdata客场球队:this.state.上克罗地亚[parseInt(value-1)]});break;}
    			if(Rank1==0){this.setState({clusterdata客场球队R:this.state.上克罗地亚R[parseInt(value-1)]});break;}
    		case data右英格兰:
    			this.setState({clusterdata客场球队:this.state.右英格兰[parseInt(value-1)]});break;
    		case data下英格兰:
    			this.setState({clusterdata客场球队:this.state.下英格兰[parseInt(value-1)]});break;
    	}	
  	};



	//键盘监听事件

	componentDidMount(){
   		document.addEventListener("keydown", this.onKeyDown)
  	}
  	componentWillUnmount(){
    	document.removeEventListener("keydown", this.onKeyDown)
  	}
	onKeyDown = (e) => {
    	switch( e.keyCode) {
      		case 65:   //A显示左侧
      			this.setState({
      				data主场球队:data左法国,
      				data客场球队:data左比利时,
      				clusterdata主场球队:this.state.左法国[this.state.clusterNum1-1],
      				clusterdata客场球队:this.state.左比利时[this.state.clusterNum2-1],
      			});
      			break;
      		case 87:   //W显示上
      			this.setState({
      				data主场球队:data上法国,
      				data客场球队:data上克罗地亚,
      				clusterdata主场球队:this.state.上法国[this.state.clusterNum1-1],
      				clusterdata客场球队:this.state.上克罗地亚[this.state.clusterNum2-1],
      				clusterdata主场球队R:this.state.上法国R[this.state.clusterNum1-1],
      				clusterdata客场球队R:this.state.上克罗地亚R[this.state.clusterNum2-1],
      			});
      			break;
      		case 83:   //S显示下
      			this.setState({
      				data主场球队:data下比利时,
      				data客场球队:data下英格兰,
      				clusterdata主场球队:this.state.下比利时[this.state.clusterNum1-1],
      				clusterdata客场球队:this.state.下英格兰[this.state.clusterNum2-1],
      			});
      			break;
      		case 68:   //D显示右
      			this.setState({
      				data主场球队:data右克罗地亚,
      				data客场球队:data右英格兰,
      				clusterdata主场球队:this.state.右克罗地亚[this.state.clusterNum1-1],
      				clusterdata客场球队:this.state.右英格兰[this.state.clusterNum2-1],
      			})
      			break;
   		}
  	}
}

export default MainFootballField;



//<DrawAllPhaseForRank data={data4} lineColor={this.state.temp_lineColor} circleColor={this.state.temp_circleColor} circleStroke={this.state.temp_circleStroke} ifShowAllPath={this.state.ifShowAllPath}/>

//<DrawAllPhase2 data={this.state.上法国R[2]} index={0} lineColor={this.state.temp_lineColor} circleColor={this.state.temp_circleColor} circleStroke={this.state.temp_circleStroke} ifShowAllPath={this.state.ifShowAllPath}/>